<template>
	<div class="container">
		<div class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<div class="flex flex-wrap diygw-col-24 flex-direction-column flex5-clz">
				<span class="diygw-col-24 text26-clz"> 实时概况 </span>
				<div class="flex flex-wrap diygw-col-24 items-center flex6-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon diygw-col-0 icon-clz diy-icon-recharge"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex31-clz">
						<span class="diygw-col-24 text27-clz"> 销售额 (元) </span>
						<span class="diygw-col-24 currentPayTotal-clz">
							{{ currentPayTotal }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex32-clz">
						<span class="diygw-col-24 text29-clz"> 支付订单数 </span>
						<span class="diygw-col-24 currentOrderTotal-clz">
							{{ currentOrderTotal }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon1 diygw-col-0 icon1-clz diy-icon-peoplelist"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex34-clz">
						<span class="diygw-col-24 text31-clz"> 当天新增会员数 </span>
						<span class="diygw-col-24 currentAddTotal-clz">
							{{ currentAddTotal }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex35-clz">
						<span class="diygw-col-24 text33-clz"> 当天付款会员数 </span>
						<span class="diygw-col-24 currentUserTotal-clz">
							{{ currentUserTotal }}
						</span>
					</div>
				</div>
			</div>
			<div class="flex flex-wrap diygw-col-24">
				<div class="flex flex-wrap diygw-col-0 items-center flex10-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon2 diygw-col-0 icon2-clz diy-icon-recharge"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex12-clz">
						<span class="diygw-col-24 text10-clz"> 商品总数量 </span>
						<span class="diygw-col-24 goodsTotal-clz">
							{{ goodsTotal }}
						</span>
					</div>
				</div>
				<div class="flex flex-wrap diygw-col-0 items-center flex19-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon5 diygw-col-0 icon5-clz diy-icon-people"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex21-clz">
						<span class="diygw-col-24 text15-clz"> 会员总人数 </span>
						<span class="diygw-col-24 userTotal-clz">
							{{ userTotal }}
						</span>
					</div>
				</div>
				<div class="flex flex-wrap diygw-col-0 items-center flex16-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon4 diygw-col-0 icon4-clz diy-icon-list"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex18-clz">
						<span class="diygw-col-24 text13-clz"> 销售总收入 </span>
						<span class="diygw-col-24 payTotal-clz">
							{{ payTotal }}
						</span>
					</div>
				</div>
				<div class="flex flex-wrap diygw-col-0 items-center flex13-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center"><span class="flex icon3 diygw-col-0 icon3-clz diy-icon-recharge"></span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex15-clz">
						<span class="diygw-col-24 text9-clz"> 消费总人数 </span>
						<span class="diygw-col-24 userPayTotal-clz">
							{{ userPayTotal }}
						</span>
					</div>
				</div>
			</div>
			<div class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
				<span class="diygw-col-24 text-clz"> 订单概况 </span>
				<div class="flex flex-wrap diygw-col-24 items-center flex2-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex3-clz">
						<span class="diygw-col-24 text1-clz"> 待发货订单(笔) </span>
						<span class="diygw-col-24 status1Total-clz">
							{{ status1Total }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex8-clz">
						<span class="diygw-col-24 text7-clz"> 待付款订单(笔) </span>
						<span class="diygw-col-24 status0Total-clz">
							{{ status0Total }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex7-clz">
						<span class="diygw-col-24 text5-clz"> 待收货订单(笔) </span>
						<span class="diygw-col-24 status2Total-clz">
							{{ status2Total }}
						</span>
					</div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column flex4-clz">
						<span class="diygw-col-24 text3-clz"> 订单合计(笔) </span>
						<span class="diygw-col-24 statusTotal-clz">
							{{ statusTotal }}
						</span>
					</div>
				</div>
			</div>
			<div class="flex flex-wrap diygw-col-24 flex-direction-column flex25-clz">
				<span class="diygw-col-24 text2-clz"> 最近七天销售额 </span>
				<div style="height: 300px" class="flex diygw-col-24"><diy-echart ref="echartRef" v-model="echart" /></div>
			</div>
			<div class="flex flex-wrap diygw-col-24 flex-direction-column flex22-clz">
				<span class="diygw-col-24 text17-clz"> 常用功能 </span>
				<div class="flex flex-wrap diygw-col-24 justify-around items-center flex23-clz">
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center" @click="navigateTo" data-type="page" data-url="/goods/goods"><span class="flex icon6 diygw-col-0 icon6-clz diy-icon-goods"></span> <span class="diygw-col-0"> 发布商品 </span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center" @click="navigateTo" data-type="page" data-url="/goods/cate"><span class="flex icon10 diygw-col-0 icon10-clz diy-icon-cascades"></span> <span class="diygw-col-0"> 分数管理 </span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center" @click="navigateTo" data-type="page" data-url="/user"><span class="flex icon9 diygw-col-0 icon9-clz diy-icon-people"></span> <span class="diygw-col-0"> 会员管理 </span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center" @click="navigateTo" data-type="page" data-url="/order/index"><span class="flex icon8 diygw-col-0 icon8-clz diy-icon-cart"></span> <span class="diygw-col-0"> 订单管理 </span></div>
					<div class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center" @click="navigateTo" data-type="page" data-url="/setting/wechat"><span class="flex icon11 diygw-col-0 icon11-clz diy-icon-settings"></span> <span class="diygw-col-0"> 系统设置 </span></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</template>

<script>
	import { useRouter, useRoute } from 'vue-router';
	import { storeToRefs } from 'pinia';
	import { useUserInfo } from '@/stores/userInfo';

	import { ElMessageBox, ElMessage } from 'element-plus';

	import DiyEchart from '@/components/echart/index.vue';

	export default {
		components: {
			DiyEchart
		},
		data() {
			return {
				globalOption: {},
				userInfo: {},
				data: {
					code: 200,
					msg: 'success',
					data: {
						goodsTotal: 11,
						userTotal: 2,
						currentPayTotal: null,
						currentOrderTotal: 0,
						currentUserTotal: 0,
						payTotal: '30.00',
						userPayTotal: 3,
						currentAddTotal: 0
					}
				},
				currentPayTotal: `0.00`,
				currentOrderTotal: `0`,
				currentAddTotal: `0`,
				currentUserTotal: `0`,
				goodsTotal: `0`,
				userTotal: `0`,
				payTotal: `0`,
				userPayTotal: `0`,
				status1Total: `0`,
				status0Total: `0`,
				status2Total: `0`,
				statusTotal: `0`,
				echart: { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'bar' }] }
			};
		},
		methods: {
			getParamData(e, row) {
				row = row || {};
				let dataset = e.currentTarget ? e.currentTarget.dataset : e;
				if (row) {
					dataset = Object.assign(dataset, row);
				}
				return dataset;
			},
			navigateTo(e, row) {
				let dataset = this.getParamData(e, row);
				let { type } = dataset;
				if (type == 'page' || type == 'inner' || type == 'href') {
					this.router.push({
						path: dataset.url,
						query: dataset
					});
				} else if (typeof this[type] == 'function') {
					this[type](dataset);
				} else {
					ElMessage.error('待实现点击事件');
				}
			},
			async init() {
				await this.dataApi();
			},
			// 合计 API请求方法
			async dataApi(param) {
				param = param || {};
				param = this.getParamData(param);
				let http_url = '/shop/index/index';
				let http_data = {};
				let http_header = {};

				let data = await this.$http.post(http_url, http_data, http_header, 'json');
				this.data = data;
				if (data.data) {
					for (let key in data.data) {
						this[key] = data.data[key] || 0;
					}
					//设置柱图数据
					this.echart.xAxis.data = data.data['dates'];
					this.echart.series[0].data = data.data['series'];
				}
			}
		},
		async mounted() {
			this.router = useRouter();
			this.globalOption = useRoute().query;
			const stores = useUserInfo();
			const { userInfos } = storeToRefs(stores);
			this.userInfo = userInfos;
			await this.init();
		},
		beforeUnmount() {}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-left: 10px;
		width: calc(100% - 10px - 10px) !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.flex5-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.text26-clz {
		padding-top: 5px;
		font-weight: bold;
		padding-left: 5px;
		font-size: 14px !important;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.flex6-clz {
		padding-top: 5px;
		padding-left: 5px;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.icon-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon {
		font-size: 32px;
	}
	.flex31-clz {
		flex: 1;
	}
	.text27-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.currentPayTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex32-clz {
		flex: 1;
	}
	.text29-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.currentOrderTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.icon1-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon1 {
		font-size: 32px;
	}
	.flex34-clz {
		flex: 1;
	}
	.text31-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.currentAddTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex35-clz {
		flex: 1;
	}
	.text33-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.currentUserTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex10-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.icon2-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon2 {
		font-size: 32px;
	}
	.flex12-clz {
		flex: 1;
	}
	.text10-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.goodsTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex19-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.icon5-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon5 {
		font-size: 32px;
	}
	.flex21-clz {
		flex: 1;
	}
	.text15-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.userTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex16-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.icon4-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon4 {
		font-size: 32px;
	}
	.flex18-clz {
		flex: 1;
	}
	.text13-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.payTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex13-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.icon3-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon3 {
		font-size: 32px;
	}
	.flex15-clz {
		flex: 1;
	}
	.text9-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.userPayTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex1-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.text-clz {
		padding-top: 5px;
		font-weight: bold;
		padding-left: 5px;
		font-size: 14px !important;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.flex2-clz {
		padding-top: 5px;
		padding-left: 5px;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.flex3-clz {
		flex: 1;
	}
	.text1-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.status1Total-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex8-clz {
		flex: 1;
	}
	.text7-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.status0Total-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex7-clz {
		flex: 1;
	}
	.text5-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.status2Total-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex4-clz {
		flex: 1;
	}
	.text3-clz {
		margin-left: 5px;
		color: #9a9a9a;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.statusTotal-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex25-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.text2-clz {
		padding-top: 5px;
		font-weight: bold;
		padding-left: 5px;
		font-size: 14px !important;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.flex22-clz {
		padding-top: 5px;
		border-bottom-left-radius: 6px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 6px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		padding-right: 5px;
	}
	.text17-clz {
		padding-top: 5px;
		font-weight: bold;
		padding-left: 5px;
		font-size: 14px !important;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.flex23-clz {
		padding-top: 5px;
		padding-left: 5px;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.icon6-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon6 {
		font-size: 32px;
	}
	.icon10-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon10 {
		font-size: 32px;
	}
	.icon9-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon9 {
		font-size: 32px;
	}
	.icon8-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon8 {
		font-size: 32px;
	}
	.icon11-clz {
		padding-top: 10px;
		border-bottom-left-radius: 60px;
		color: #045aef;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 60px;
		margin-right: 5px;
		background-color: #eff6ff;
		margin-left: 5px;
		overflow: hidden;
		border-top-left-radius: 60px;
		margin-top: 5px;
		border-bottom-right-radius: 60px;
		margin-bottom: 5px;
		padding-right: 10px;
	}
	.icon11 {
		font-size: 32px;
	}
	.container {
		background-color: #f7f7f7;

		font-size: 12px;
	}
	.container {
		border-radius: 0;
		height: 100%;
		flex: 1;
		box-shadow: none;
		padding: 0;
	}
</style>
